<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script type="text/javascript" src="../js/vue.min.js"></script>
    <script type="text/javascript" src="../js/vue-router.js"></script>
    <title>router</title>
    <style type="text/css">
      body {
        padding: 0px;
        margin: 0px;
      }
      ul {
        list-style: none;
      }
      ul li {
        display: inline;
        float: left;
        margin-left: 15px;
        margin-bottom: 20px;
      }
      ul li a {
        text-decoration: none;
        color: azure;
        font-size: 18px;
        font-weight: bold;
      }
      ul li a:hover {
        color: rgba(99, 233, 21, 0.671);
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div style="height: 70px; width: 100%; background: rgb(27, 92, 177)">
        <table>
          <tr>
            <td>
              <img
                src="../img/logo.png"
                height="70px"
                style="margin-left: 100px"
              />
            </td>
            <td>
              <ul>
                <li>
                  <router-link to="/a">首页</router-link>
                </li>
                <li>
                  <router-link to="/b">JAVA</router-link>
                </li>
                <li>
                  <router-link to="/c">HTML5</router-link>
                </li>
                <li>
                  <router-link to="/d">Python</router-link>
                </li>
              </ul>
            </td>
          </tr>
        </table>
      </div>
      <div style="height: 700px; width: 100%; background: #07f0d1">
        <p>返回首页</p>
        <router-view>sdsd</router-view>
      </div>
    </div>
    <script type="text/javascript">
      // vue的路由只为单页面应用开发提供便捷
      // 1.定义连接跳转的模板（组件）const 一旦赋值不允许改变
      const t1 = {
        template: `<div style="background-color:red">3333333333333333333333</div>`,
      };
      const t2 = {
        template: `<p>java</p>`,
      };
      const t3 = {
        template: `<p>html5</p>`,
      };
      const t4 = {
        template: `<p>Python</p>`,
      };
      // 2.定义路由规则
      const myRouter = new VueRouter({
        routes: [
          {
            path: "/a",
            component: t1,
          },
          {
            path: "/b",
            component: t2,
          },
          {
            path: "/c",
            component: t3,
          },
          {
            path: "/d",
            component: t4,
          },
        ],
      });
      var vue = new Vue({
        el: "#app",
        router: myRouter,
      });
    </script>
  </body>
</html>
